	  <table class="table table-striped table-condensed">
		  <thead>
			  <tr>
				  <th>Host Name</th>
				  <th>Status</th>
				  <th>Total Num Jobs (Slots)</th>
				  <th>Num Running Jobs (Slots)</th>
				  <th>Num Suspended Jobs (Slots)</th>
			  </tr>
		</thead>
		<tbody>
  			{% for host in host_list %}
			<tr id="hr_{% if prefix %}prefix{% endif %}_{{ host.host_name }}_row" class="{% if host.is_busy %}info{% elif host.is_closed %}warning{% elif host.is_down %}danger{% endif %}">
				<td><a href='{% url 'olw_host_view' host.host_name %}'>{{ host.host_name }}</a></td>
				<td id="hr_{% if prefix %}prefix{% endif %}_{{ host.host_name }}_status">{% for status in host.statuses %}{{ status.friendly }}{% if not forloop.last %}<br />{% endif %}{% endfor %}</td>
				<td id="hr_{% if prefix %}prefix{% endif %}_{{ host.host_name }}_total">{{ host.total_jobs }} ({{ host.total_slots }})</td>
				<td id="hr_{% if prefix %}prefix{% endif %}_{{ host.host_name }}_running">{{ host.num_running_jobs }} ({{ host.num_running_slots }})</td>
				<td id="hr_{% if prefix %}prefix{% endif %}_{{ host.host_name }}_suspended">{{ host.num_suspended_jobs }} ({{ host.num_suspended_jobs }})</td>
			</tr>
			{% empty %}
			<tr><td colspan="5">No Hosts.</td></tr>
			{% endfor %}
		</tbody>
	</table>
<script>
    function update_host_list(){
        olwclient.serverUrl("{% url 'olw_system_view' %}");
        olwclient.Host.getHostList(function(hosts){
            var i;
            for (i=0; i < hosts.length; i++){
                var host = hosts[i];
                var sel = "#hr_{% if prefix %}prefix{% endif %}_" + host.host_name + "_";
                var stats=[];
                    host.statuses.forEach( function(s){
                    stats.push( s.friendly );
                });

                $(sel + "row").removeClass("info");
                $(sel + "row").removeClass("warning");
                $(sel + "row").removeClass("danger");
                if (host.is_busy){
                    $(sel + "row").addClass("info");
                }else if (host.is_closed){
                    $(sel + "row").addClass("warning");
                }else if (host.is_down){
                    $(sel + "row").addClass("danger");
                }

                $(sel + "status").html(stats.join("<br />"));
                $(sel + "total").text(host.total_jobs + ' (' + host.total_slots + ')' );
                $(sel + "running").text(host.num_running_jobs.toString() + ' (' + host.num_running_slots + ')');
                $(sel + "suspended").text(host.num_suspended_jobs + ' (' + host.num_suspended_slots + ')');

            }
            setTimeout(update_host_list, 30000);
        }, function(){
            console.log("Unable to get host list");
        });
    }
    $(function() {
        olwclient.serverUrl("{% url 'olw_system_view' %}");
        setTimeout(update_host_list, 30000);
    });
</script>